// web/src/components/auth/reset-form.tsx
'use client';
import React, {useState, useTransition} from 'react';
import CardWrapper from "@/components/auth/card-wrapper";
// 如果没用client, 报错xxx is not a function
import {useForm} from "react-hook-form";
import * as z from 'zod'
import {ResetSchema} from "@/schemas";
import {zodResolver} from "@hookform/resolvers/zod";
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import FormError from "@/components/form-error";
import FormSuccess from "@/components/form-success";
import {reset} from "@/actions/reset";


const ResetForm = () => {
    // 提交表单后的错误或成功信息
    const [error, setError] = useState<string | undefined>('')
    const [success, setSuccess] = useState<string | undefined>('')

    const [isPending, startTransition] = useTransition()

    const form = useForm<z.infer<typeof ResetSchema>>({
        resolver: zodResolver(ResetSchema),
        defaultValues: {
            email: '',
        }
    })

    const onSubmit = (values: z.infer<typeof ResetSchema>) => {
        setError('')
        setSuccess('')

        // 可以获取是否执行中的状态
        startTransition(() => {
            reset(values)
                .then((data) => {
                    setError(data?.error)
                    setSuccess(data?.success)
                })
        })
    }

    return (
        <CardWrapper
            headerLabel={'Forgot your password?'}
            backButtonLabel={`Back to login`}
            backButtonHref={`/auth/login`}
        >
            <Form {...form}>
                <form
                    onSubmit={form.handleSubmit(() => {
                        onSubmit(form.getValues())
                    })}
                    className="space-y-6"
                >
                    <div className={`space-y-4`}>
                        <FormField
                            control={form.control}
                            name="email"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel>Email</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            disabled={isPending}
                                            placeholder="Email"
                                            type="email"
                                        />
                                    </FormControl>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />
                    </div>
                    <FormError message={error}/>
                    <FormSuccess message={success}/>
                    <Button
                        type="submit"
                        disabled={isPending}
                        className={`w-full`}
                    >
                        Send reset email
                    </Button>
                </form>
            </Form>
        </CardWrapper>
    );
};

export default ResetForm;